import { ProTable, ProTableProps } from "@ant-design/pro-components";
import cs from "classnames";
import styles from "./index.module.less";
import { Button, ConfigProvider, Space, Divider } from "antd";
import { useMemo } from "react";
import { map } from "lodash";

interface Props extends ProTableProps {
	className?: string;
	columns?: any[];
}

export default (props: Props) => {
	const { className, columns, ...rest } = props;

	const newColumns = useMemo(() => {
		return map(columns, item => {
			if (item.dataIndex === "action-render") {
				return {
					align: "center",
					className: "table_actions",
					render: (_, record) => {
						const list = Array.isArray(item.options) ? item.options : item.options(record);
						// console.log("=======item:", item);
						return (
							<Space size={0}>
								{map(list, (item2, index) => {
									return (
										<>
											<Button
												style={{ color: item2.value === "delete" ? "#E82F2F" : "#3976F2" }}
												size="small"
												type="link"
												onClick={e => item.onClick(item2?.value, record, e)}
											>
												{item2?.label}
											</Button>
											{index !== list?.length - 1 && <Divider type="vertical" />}
										</>
									);
								})}
							</Space>
						);
					},
					...item
				};
			}
			return {
				...item,
				align: item?.align || "center"
			};
		});
	}, [columns]);

	return (
		<ConfigProvider
			theme={{
				components: {
					Table: {
						headerBg: "#F3F4F7",
						rowHoverBg: "#F7F7F7",
						borderColor: "#E2E2E2"
					}
				}
			}}
		>
			<ProTable
				className={cs([styles.container, className])}
				columns={newColumns}
				toolBarRender={false}
				search={false}
				pagination={{
					position: ["bottomCenter"],
					showTotal: () => null,
					defaultPageSize: 10
				}}
				{...rest}
			/>
		</ConfigProvider>
	);
};
